<template>
	<div class="Polygon">
		<div style="width: 100%; height: 100%;">
			<div v-if="edit" style="margin-bottom: 5px;">
				<el-input v-model="searchKeyword" placeholder="搜索地点" id="tipinput" size="mini"
					style="width: 200px;margin-right: 10px;"></el-input>
				<!-- <el-button type="primary" size="mini" @click="polyEditor.open()">开始编辑</el-button> -->
				<el-button type="primary" size="mini" @click="polyEditorOpen">开始编辑</el-button>
				<el-button type="primary" size="mini" @click="polyEditorClose">结束编辑</el-button>
				<el-button type="primary" size="mini" @click="clearPath">清除</el-button>
			</div>
			<MapContainer ref="MapContainer"></MapContainer>
		</div>
	</div>
</template>

<script>
	import MapContainer from "./MapContainer.vue"
	export default {
		/**
		 * edit: 是否启用编辑器，默认为false
		 * coordinate: 可选，传入的坐标数组
		 * @change: newCoordinate为改变后的坐标数组
		 */
		components: {
			MapContainer
		},
		data() {
			return {
				AMap: null,
				map: null, // 地图实例
				polygon: null, // 多边形实例
				polyEditor: null, // 编辑工具
				auto: null, // 搜索框
				placeSearch: null, // 搜索
				path: this.coordinate, // 坐标数组
				searchKeyword: null, // 关键字
				marker: null, // 标记点实例
				point: this.markPoint // 标记点
			}
		},
		mounted() {
			this.initAMap();
		},
		methods: {
			initAMap() {
				if (!this.$AMap) {
					setTimeout(() => {
						this.initAMap();
					}, 100);
				} else {
					this.AMap = this.$AMap;
					this.map = this.$refs.MapContainer.map;
					//this.map.setCenter([115.872204, 28.700762])

					// 有坐标数组则初始化
					if (this.path !== null && this.path.length > 0) {
						// 加载多边形
						this.loadPolygon();
						// 创建一个编辑工具
						this.polyEditor = new this.AMap.PolyEditor(this.map, this.polygon)
						// 监听编辑结束事件
						this.polyEditorEnd();
					}

					// 搜索
					this.auto = new this.AMap.AutoComplete({
						input: 'tipinput'
					});
					this.placeSearch = new this.AMap.PlaceSearch({
						map: this.map,
					})
					// 当选中某条搜索记录时触发
					this.selectSite();
					
					// 标记点
					if (this.point !== null && this.point.length > 0){
						this.loadMarker();
					}
				}
			},
			loadPolygon() {
				this.polygon = new this.AMap.Polygon({
					path: this.path, // 多边形轮廓数组
					strokeColor: "#FF33FF", // 轮廓线颜色
					strokeWeight: 6, // 轮廓线宽度
					strokeOpacity: 0.2, // 轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.9
					fillOpacity: 0.4, // 多边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5
					fillColor: '#1791fc', // 多边形填充颜色
					zIndex: 50, //多边形覆盖物的叠加顺序。
				})
				// 将矢量图形对象添加进地图对象中
				this.map.add(this.polygon)
				// 缩放地图到合适的视野级别
				this.map.setFitView([this.polygon])
				//console.log("polygon==>", this.polygon)
			},
			polyEditorEnd() {
				// 监听 PolyEditor 的 end 事件
				this.AMap.Event.addListener(this.polyEditor, 'end', (event) => {
					// 在编辑结束时执行的操作
					// 获取编辑后的多边形路径数组
					//console.log("event=>", event)
					if (event.target !== null) {
						this.polygon = event.target;
						const path = this.polygon.getPath();
						// 将路径数组转换为经纬度数组
						this.path = path.map(point => [point.getLng(), point.getLat()]);
						// 打印多边形的经纬度数组
						//console.log("多边形数组==>", this.path);
						this.$emit("change", this.path)
					}
				});
			},
			// 开始编辑
			polyEditorOpen() {
				if (this.path !== null && this.path.length > 0) {
					this.polyEditor.open();
				} else {
					// 获取当前地图中心点
					const center = this.map.getCenter();
					//console.log("地图中心点=>",center)
					const lng = center.lng
					const lat = center.lat
					//console.log("经纬度=>", lng, lat)
					this.path = [
						[lng, lat],
						[lng, lat - 0.001],
						[lng - 0.001, lat - 0.001]
					]
					// 加载多边形
					this.loadPolygon();

					// 创建一个编辑工具
					this.polyEditor = new this.AMap.PolyEditor(this.map, this.polygon)
					this.polyEditorEnd();
					this.polyEditor.open();
				}
			},
			// 结束编辑
			polyEditorClose(){
				if(this.polyEditor != null){
					this.polyEditor.close();
				}
			},
			// 监听选中
			selectSite() {
				this.AMap.Event.addListener(this.auto, 'select', (event) => {
					//console.log("event==>", event)
					if (event.poi) {
						this.placeSearch.search(event.poi.name, (status, result) => {
							// console.log("status=>", status);
							// console.log("result=>", result);
							// if (status === 'complete' && result.info === 'OK') {
							// 	// 在这里处理搜索结果
							// 	const poiList = result.poiList.pois;
							// 	// 获取第一个POI的经纬度
							// 	const location = poiList[0].location;
							// 	console.log("location==>",location);
							// } else {
							// 	// 搜索失败或没有结果时的处理
							// 	console.log('搜索失败');
							// }
						})
					}
				})
			},
			// 清除多边形
			clearPath() {
				if (this.polygon != null) {
					this.polyEditor.close();
					this.map.remove(this.polygon);
					this.path = new Array();
					this.polygon = null;
					this.polyEditor = null;
				}
				//this.$message.success("清除成功")
			},
			// 加载标记点
			loadMarker(){
				if (this.point !== null && this.point.length > 0){
					this.marker = new this.AMap.Marker({
						position: new this.AMap.LngLat(this.point[0],this.point[1]),
					})
					this.map.add(this.marker);
					this.map.setFitView(this.marker);
				}
			},
			// 删除标记点
			removeMarker(){
				this.map.remove(this.marker);
			}
		},
		props: {
			coordinate: {
				type: Array,
				default: function() {
					return new Array();
				}
			},
			edit: {
				type: Boolean,
				default: false
			},
			markPoint: {
				type: Array,
				default: function() {
					return new Array();
				}
			}
		},
		watch: {
			coordinate(newValue, oldValue) {
				this.clearPath();
				//console.log('coordinate发生变化==>', newValue);
				// 在这里可以执行相应的操作，比如更新子组件的数据或者触发某个方法
				this.path = newValue
				//console.log('coordinate发生变化==>', this.path);
				this.loadPolygon();
				this.polyEditor = new this.AMap.PolyEditor(this.map, this.polygon)
				// 监听编辑结束事件
				this.polyEditorEnd();
			},
			markPoint(newValue, oldValue) {
				this.removeMarker();
				this.point = newValue;
				this.loadMarker();
			}
		}
	}
</script>

<style>
</style>